<template>
	<view class="wordVideo" @click="onDetail(content)">
		<view class="title">
			{{content.title}}
		</view>
		<view class="" style="margin-bottom: 14px;position: relative;">
			<!-- <video src="https://lw-sit.oss-cn-beijing.aliyuncs.com/lw/manageFilevc-upload-1623206342399-2/1623206394561111111.mp4" controls></video> -->
			<image :src="content.fileVOList[0].url" mode="aspectFill"></image>
			<view class="pauseIcon">
				<image src="../../../static/onPlay@2x.png" mode=""></image>
			</view>
			<view class="videoTime">
				{{minSecond(content.videoTime)}}
			</view>
		</view>
		<view class="flexBetween">
			<view class="bottomLeft">
				<span style='margin-right: 17px;'>{{content.columnName}}</span>
				<span style='margin-right: 7px;'>阅读</span>
				<span>{{content.readNumber}}</span>
			</view>
			<view class="bottomRight">
				<span style='margin-right: 7px;'>{{content.author}}</span>
				<span>{{content.releaseDate}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wordTitle: '交通运输部办公厅印发公路安全生命防护等三项工程典型案例的通知',
				imageData: 'https://wx1.sinaimg.cn/orj360/683b09a3ly1gqory7s67vj222o340hdt.jpg'
			}
		},
		props: ['content'],
		methods: {
			onDetail(val) {
				uni.navigateTo({
					url: `../videoDetail/videoDetail?id=${val.id}&read=${val.read}&readRest=${val.readRest}`
				});
			},
			//处理时间
			minSecond(n) {
				let second_ = Math.floor(n % 60);
				if (second_ < 10) {
					second_ = '0' + second_;
				}
				let a=0
				if (Math.floor(n / 60) < 10) {
					a = "0" + Math.floor(n / 60) + ':' + second_;
				} else {
					a = Math.floor(n / 60) + ':' + second_;
				}
				return a;
			}
			
		},
		
			
		
	}
</script>

<style scoped>
	/* .wordVideo{
		padding: 11px 0;
		margin: 0 15px;
		border-bottom: 1px solid #f0f0f0;
	} */
	.title {
		font-size: 18px;
		line-height: 25px;
		margin-bottom: 14px;
	}

	.bottomRight {
		color: #666;
		font-size: 11px
	}

	.bottomLeft {
		color: #666;
		font-size: 12px
	}

	::v-deep video {
		width: 100%;
	}

	::v-deep image {
		width: 100%;
		height: 190px;
	}

	.pauseIcon ::v-deep image {
		width: 50px;
		height: 50px;
	}

	.pauseIcon {
		width: 50px;
		height: 50px;
		position: absolute;
		left: calc(50% - 25px);
		top: calc(50% - 25px);
	}

	,
	.videoTime {
		width: 37px;
		height: 20px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 3px;
		text-align: center;
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #fff;
		line-height: 20px;
		font-size: 10px;
	}
</style>
